<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import AnalysisComponent from '@/components/AnalysisComponent.vue'
import { Close } from '@element-plus/icons-vue'

const leftData = [
  {
    label: '单选',
    name: '单选',
    type: 'radio'
  },
  {
    label: '多选',
    name: '多选',
    type: 'checkbox'
  },
  {
    label: '文本收集',
    name: '文本收集',
    type: 'textarea'
  },
]

const draggingElement = ref(null)
const formData = ref([]);
const currentSelectIndex = ref(0);
const clone = (evt) => {
  const newItem = createByClickOrClone(evt);
  draggingElement.value = newItem;
  currentSelectIndex.value++
  return { ...newItem };  // 确保返回一个新的对象实例
}

const createCompByClick = (element) => {

  formData.value.splice(formData.value.length, 0, { ...createByClickOrClone(element) })

}

const createByClickOrClone = (element) => {
  const baseConfig = {
    id: Date.now() + Math.random().toString(36).substr(2, 9), // 添加唯一ID
    desc: '',
    placeholderDesc: '请输入描述',
    label: element.label,
    name: element.name,
    type: element.type,
  };

  if (element.type === 'radio') {
    return {
      ...baseConfig,
      title: '单选',
      options: ['选项1', '选项2', '选项3'],
    }
  } else if (element.type === 'checkbox') {
    return {
      ...baseConfig,
      title: '多选',
      options: ['选项1', '选项2', '选项3'],
    }
  } else if (element.type === 'textarea') {
    return {
      ...baseConfig,
      title: '文本',
    }
  }
}

const onStart = (evt) => {
  const element = leftData[evt.oldIndex];
  draggingElement.value = createByClickOrClone(element);
}

const onEnd = () => {
  draggingElement.value = null;
}
const remove = (e) => {
  formData.value.splice(e, 1)
}
</script>

<template>
  <div class="container">
    <el-row :gutter="100">
      <el-col :span="4">
        <el-card style="min-height: 80vh;">
          <div slot="header">可选组件</div>
          <VueDraggable v-model="leftData" :group="{ name: 'sevenBotForm', pull: 'clone', put: false }" :sort="false"
            :clone-on-drop="true" :animation="0" :clone="clone" @start="onStart">
            <div v-for="element in leftData" :key="element.id" style="padding: 10px 0;">
              <el-button type="primary" @click="createCompByClick(element)">
                {{ element.name }}
              </el-button>
            </div>
          </VueDraggable>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="min-height: 80vh;">
          <div slot="header">表单内容</div>
          <VueDraggable v-model="formData" :group="{ name: 'sevenBotForm' }" ghost-class="ghost-class"
            drag-class="drag-class" style="margin-top: 20px;" @end="onEnd">
            <template #ghost>
              <div v-if="draggingElement" style="padding: 10px 0;">
                <AnalysisComponent :formData="draggingElement" :index="formData.length + 1">
                  <div class="close">
                    <el-icon>
                      <Close />
                    </el-icon>
                  </div>
                </AnalysisComponent>
              </div>
            </template>
            <div v-for="(element, index) in formData" :key="element.id" style="padding: 10px 0;">
              <AnalysisComponent :formData="element" :index="index + 1">
                <div class="close" @click="remove(index)">
                  <el-icon>
                    <Close />
                  </el-icon>
                </div>
              </AnalysisComponent>
            </div>

            <div v-if="formData.length == 0"
              style="border: 1px solid #efefef; min-height: 150px;line-height: 150px;text-align: center;">
              点击/拖动添加组件
            </div>
          </VueDraggable>
        </el-card>
      </el-col>
      <el-col :span="6">
        3
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.ghost-class {
  border: 2px dashed #409EFF !important;
  border-radius: 8px;
  background-color: #f0f9ff !important;
  opacity: 0.8;
  padding: 10px;
}

.ghost-class :deep(.form-item) {
  background-color: #fff;
  opacity: 0.9;
}

.drag-class {
  transform: scale(1.02);
  transition: all 0.2s ease;
}

:deep(.el-card) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-button) {
  width: 100%;
}


.close {
  cursor: pointer;
}
</style>
